<template>
      <el-drawer
        v-model="designerStore.designerVisible"
        :title="dsgnItem ? dsgnItem.name : ''"
        :append-to-body="true"
        size="100%"
        z-index="1000"
        class="action_designer_drawer"
        :with-header="widthHeader"
        ref="drawerRef"
      >
        <component
          v-if="dynamicComponent"
          :is="dynamicComponent"
          @exit-event="handleChildExitEvent"
          :propMixin="propMixinValue as DesignerMixinData"
          :key="dsgnItem.category + '_' + dsgnItem.id"
        />
    </el-drawer>

<!--  <vxe-modal-->
<!--    v-model="designerStore.designerVisible"-->
<!--    :title="dsgnItem ? dsgnItem.name : ''"-->
<!--    fullscreen-->
<!--    show-zoom-->
<!--    lock-scroll-->
<!--    width="100%"-->
<!--    height="100%"-->
<!--  >-->
<!--    <component-->
<!--      v-if="dynamicComponent"-->
<!--      :is="dynamicComponent"-->
<!--      @exit-event="handleChildExitEvent"-->
<!--      :propMixin="propMixinValue as DesignerMixinData"-->
<!--      :key="dsgnItem.category + '_' + dsgnItem.id"-->
<!--    />-->
<!--  </vxe-modal>-->
</template>

<script setup lang="ts">
import { CenterVO } from '@/api/res/ResCenter'
import { ref, defineAsyncComponent } from 'vue'
import { DesignerMixinData } from '@/components/Designer/mixins/DesignerMixin'
import { useApprovalDesignerStore } from '@/store/modules/dsgn/ApprovalDesigner'

defineOptions({ name: 'ActionDesigner' })

const dynamicComponent = ref(null)
const widthHeader = ref(false)
const designerStore = useApprovalDesignerStore()

const dsgnItem = ref<CenterVO | null>(null)
const actionItem = ref<any | null>(null)

const propMixinValue = ref({})

// 动态加载组件的函数
const loadComponent = async (newActionItem: any) => {
  console.log('Before update:', newActionItem)
  if (!newActionItem || !newActionItem.cmp) return // 防止无效调用
  try {
    // 动态加载设计器组件
    // const componentModule = await newActionItem.cmp()
    if (!newActionItem.cmp) {
      return
    }
    // const componentModule = await newActionItem.cmp;
    // const componentModule = await import(newActionItem.cmp)
    // const component = await newActionItem.cmp;

    // if (newActionItem.drawerProps) {
    //   // debugger;
    //   widthHeader.value = true;
    // }else{
    //   widthHeader.value = false;
    // }

    dynamicComponent.value = newActionItem.cmp
    // // 确保组件有有效的模板或渲染函数
    // if (component && (component.template || component.render)) {
    //   dynamicComponent.value = defineAsyncComponent(() => Promise.resolve(component))
    //
    // }
  } catch (error) {
    console.error('Error loading component:', error)
  }

  console.log('After update:', dynamicComponent.value)
}
const handleChildExitEvent = (message) => {
  designerStore.designerVisible = false
}
// 打开设计器
const designerOpen = async (dsgnObj: CenterVO, actItem: any) => {
  // dsgnObj.value=dsgnObj;
  dsgnItem.value = dsgnObj
  actionItem.value = actItem
  propMixinValue.value = {
    dsgnItem: dsgnItem.value,
    actionItem: actionItem.value
  }
  designerStore.setDesignerVisible(true)
  // 加载对应的设计器组件
  await loadComponent(actItem)

  // emit('designerOpen') // 触发父组件监听的事件
}

// const emit = defineEmits();

// // 定义子组件所触发的自定义事件类型
// const emit = defineEmits<{
//   (event: 'designerOpen'): void
// }>()
// const emit =  defineEmits()
// emit('designerOpen')
// const handleAction = inject('handleAction')

// /** 初始化 **/
// onMounted(() => {
//   try {
//     console.log('ActionDesigner component has been mounted')
//     alert(1)
//   } catch (error) {
//     console.error('Error in onMounted:', error)
//     alert(2)
//   }
// })
// nextTick(() => {
defineExpose({ designerOpen })
// })
// const designerOpenRef = ref(designerOpen)
</script>
